<template>
  <div>
    <!-- 销售产品 -->
    <custom-container
      ref="customContainerRef"
      :config="mainConfig"
    ></custom-container>
    <!-- 添加或修改参数配置对话框 -->
    <setForm
      ref="setFormRef"
      v-model:open="open"
      v-model:title="title"
      v-model:isAdd="isAdd"
      @changeList="handleQuery"
    />
  </div>
</template>
<script lang="ts" setup>
import {
  defineEmits,
  ref,
  watch,
  nextTick,
  computed,
  defineAsyncComponent,
  getCurrentInstance,
  onBeforeUnmount,
} from 'vue'
import {
  Plus,
  Edit,
  Delete,
  Search,
  Upload,
  Bottom,
  Key,
  UploadFilled,
} from '@element-plus/icons-vue'
import { ElButton, ElMessageBox, ElMessage, ElSwitch } from 'element-plus'
import usedicts, { DictDirection } from '@/store/modules/dicts'
import {
  getProductList,
  delProduct,
  addProduct,
  getProductDetail,
  updateProduct,
} from '@/api/businessConfig/promotingProducts'

const dicts = usedicts()
const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
const productCodes = ref([]),
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  // 查询
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    status: 1,
  }),
  customContainerRef = ref(null),
  setFormRef = ref(null),
  {
    proxy,

  }:{
    proxy:any
 
  } = getCurrentInstance()
let ids = [],
  // 新增状态
  open = ref(false),
  title = ref(''),
  isAdd = ref(false)
// 列表选择
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  const rowsList = JSON.parse(JSON.stringify(rows))
  ids = rowsList.map((item) => item.id)
  productCodes.value = rows.map((el) => el.salesProductCode)
  single.value = rows.length != 1
  multiple.value = !rows.length
}
// 查询
const handleQuery = () => {
  queryParams.value.pageNum = 1
  customContainerRef.value.getList()
}
// 新增
const handleAdd = () => {
  open.value = true
  isAdd.value = true
  title.value = '新增产品'
}
// 修改
const handleUpdate = (row: { [key: string]: any }) => {
  const id = (row && row.id) || ids
  open.value = true
  isAdd.value = false
  title.value = '修改产品'
  setFormRef.value.getList(id)
}
// 删除
const handleDelete = (row:{[key:string]:any}) => {
  const id = (row && row.id) || ids
  ElMessageBox.confirm(`"是否确定删除产品编号为"${ id }"的数据?"`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    delProduct(id)
    handleQuery()
    ElMessage.success('删除成功')
  })
  .catch(error => {
    if (error == 'cancel') {
      ElMessage.info('取消删除')
    }
  })
}
// 导出
const handleExport = () => {
  proxy.$download('/system/product/export', queryParams, `销售产品_${ new Date().getTime() }.xlsx`)
}
const mainConfig = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '销售产品代码',
            prop: 'salesProductCode',
            width: '100',
            option: {
              placeholder: '请输入销售产品代码',
            },
          },
          {
            label: '产品中文名称',
            prop: 'salesProductName',
            width: '100',
            option: {
              placeholder: '请输入产品中文名称',
            },
          },
          {
            label: '状态',
            prop: 'status',
            type: 'select',
            width: '100',
            option: {
              placeholder: '请输入产品状态',
              dictInfo: {
                dict: DictDirection.产品状态,
              },
            },
          },
        ],
        queryParams: queryParams.value,
        formOption: {
          labelWidth: '68px',
        },
      },

      btns: [
        {
          title: '新增',
          directive: [['hasPermi', ['system:products:add']]],
          onclick: handleAdd,
          icon: Plus,
        },
        {
          title: '修改',
          directive: [['hasPermi', ['system:products:edit']]],
          type: 'success',
          disabled: single.value,
          icon: Edit,
          onClick: handleUpdate,
        },
        {
          title: '删除',
          directive: [['hasPermi', ['system:products:remove']]],
          onClick: handleDelete,
          type: 'danger',
          disabled: multiple.value,
          icon: Delete,
        },
        {
          title: '导出',
          onclick: handleExport,
          type: 'warning',
          icon: Bottom,
          directive: [['hasPermi', ['system:products:export']]],
        },
      ],
      table: {
        columns: [
          {
            type: 'selection',
            width: '55',
            align: 'center',
          },
          {
            label: '销售产品代码',
            prop: 'salesProductCode',
            width: '120',
            align: 'center',
          },
          {
            label: '销售产品中文名',
            prop: 'salesProductName',
            align: 'center',
            width: '120',
          },
          {
            label: '销售产品英文名',
            prop: 'salesProductEname',
            align: 'center',
            width: '120',
          },
          {
            label: '材积系数',
            prop: 'volumeCoefficient',
            align: 'center',
          },
          {
            label: '体积系数',
            prop: 'volunmFactor',
            align: 'center',
          },
          {
            label: '计重规则',
            prop: 'weightRules',
            align: 'center',
            width: '120',
            formatter: (row) => dicts.getDictLabel({ dict: DictDirection.计重规则, value: row.weightRules }),
          },
          {
            label: '产品组',
            prop: 'productGroup',
            align: 'center',
          },

          {
            label: '产品分类',
            prop: 'productType',
            align: 'center',
            autoFormatter: {
              dict: DictDirection.产品分类,
              rowKey: 'productType',
            },
          },
          {
            label: '产品类型',
            prop: 'productClassification',
            align: 'center',
            autoFormatter: {
              dict: DictDirection.产品类型,
              rowKey: 'productClassification',
            },
          },
          {
            label: '运输类别',
            prop: 'transportType',
            align: 'center',
            autoFormatter: {
              dict: DictDirection.运输类型,
              rowKey: 'transportType',
            },
          },
          {
            label: '产品状态',
            prop: 'status',
            align: 'center',
            autoFormatter: {
              dict: DictDirection.产品状态,
              rowKey: 'status',
            },
          },
          {
            label: '是否录入邮编',
            prop: 'isEntryEmail',
            align: 'center',
            width: '120',
            autoFormatter: {
              dict: DictDirection.录入邮编,
              rowKey: 'isEntryEmail',
            },
          },
          {
            label: '是否补足单件',
            prop: 'isSinglePiece',
            align: 'center',
            width: '120',
            formatter(row: { [key: string]: any }) {
              if (row.isSingle == 0) {
                return '不补足'
              }
              return '补足'
            },
          },
          {
            label: '是否补足101',
            prop: 'isMakeUps',
            align: 'center',
            width: '120',
            formatter(row: { [key: string]: any }) {
              if (row.isMakeUp == 0) {
                return '不补足'
              }
              return '补足'
            },
          },
          {
            label: '失效时间',
            prop: 'failureTime',
            align: 'center',
          },
          {
            label: '操作',
            align: 'center',
            fixed: 'right',
            minWidth: '150',
            showOverflowTooltip: false,
            className: 'custormFixedCol',
            render: (h, params) => {
              const buttons = [
                {
                  title: '修改',
                  icon: Edit,
                  clickFun: handleUpdate,
                  directive: [['hasPermi', ['system:products:edit']]],
                },
                {
                  title: '删除',
                  icon: Delete,
                  clickFun: handleDelete,
                  directive: [['hasPermi', ['system:products:remove']]],
                },
              ]
              return buttons.map((el) => h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  icon: el.icon,
                  onClick: () => {
                    el.clickFun(params.row)
                  },
                },
                {
                  default: () => el.title,
                },
              ))
            },
          },
        ],
        event: {
          onSelectionChange: (rows) => {
            handleSelectionChange(rows)
          },
        },
      },
      api: getProductList,
    }
  },
  set(val) {
    return val
  },
})
</script>
